<template>
  <div class="chart-wrapper" ref="hotMap"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref } from "vue";
import { debounce, getGeoJson, getMapInfo } from "@/utils/index.js";
import { selectCityData } from "@/api/chart";

export default {
  name: "hotMap",
  setup(props, context) {
    let myChart = ref(null);
    let geoJson = ref(null);
    const hotMap = ref(null);
    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getMapJson();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    //通过高德获取geoJson数据
    const getMapJson = async () => {
      geoJson.value = await getGeoJson("100000");
      getMapData();
    };

    //模拟接口，获取echarts数据
    const getMapData = async () => {
      const data = await getMapInfo("100000");

      let mapData = data.map((item, index) => {
        return {
          name: item.name,
          value: [
            item.center.lng,
            item.center.lat,
            Math.random(0, 1) * 40 + 15,
          ],
        };
      });

      //再添加点假数据
      const value = [
        {
          name: "武汉",
          x: "114.31",
          y: "30.52",
        },
        {
          name: "汉阳",
          x: "114.02",
          y: "30.57",
        },
        {
          name: "黄石",
          x: "115.09",
          y: "30.2",
        },
        {
          name: "十堰",
          x: "110.79",
          y: "32.65",
        },
        {
          name: "宜昌",
          x: "111.3",
          y: "30.7",
        },
        {
          name: "孝感",
          x: "113.91",
          y: "31.92",
        },
        {
          name: "汉川",
          x: "113.59",
          y: "30.63",
        },
        {
          name: "应山",
          x: "113.81",
          y: "31.62",
        },
        {
          name: "黄冈",
          x: "114.87",
          y: "30.44",
        },
        {
          name: "麻城",
          x: "115",
          y: "31.17",
        },
        {
          name: "黄梅",
          x: "115.93",
          y: "30.09",
        },
        {
          name: "通山",
          x: "114.52",
          y: "29.6",
        },
        {
          name: "荆门",
          x: "112.19",
          y: "31.02",
        },
        {
          name: "监利",
          x: "112.9",
          y: "29.83",
        },
      ];
      value.forEach((item) => {
        mapData.push({
          name: item.name,
          value: [item.x, item.y, Math.random(0, 1) * 40 + 15],
        });
      });
      initEcharts(mapData);
    };

    const initEcharts = (data) => {
      myChart = echarts.init(hotMap.value);
      echarts.registerMap("china", geoJson.value);
      myChart.setOption(
        {
          tooltip: {},
          title: {
            show: true,
            left: "center",
            top: "18",
            text: "热力图",
            textStyle: {
              color: "rgb(179, 239, 255)",
              fontSize: 16,
            },
          },
          visualMap: {
            show: false,
            left: "2%",
            bottom: "1%",
            min: 0,
            max: 40,
            text: ["40", "0"],
            inRange: {
              color: ["#41A7DE", "#eac736", "#fffc00", "#ff2600"],
            },
          },
          toolbox: {
            feature: {
              restore: {
                show: false,
              },
              dataView: {
                show: false,
              },
              saveAsImage: {
                show: false,
              },
              dataZoom: {
                show: false,
              },
              magicType: {
                show: false,
              },
              myTool1: {
                show: true,
                title: "散点图",
                icon:
                  "image://",
                onclick() {
                  sendMap("pointMap");
                },
              },
              myTool2: {
                show: true,
                title: "散点图2",
                icon:
                  "image://",
                onclick() {
                  sendMap("morePointMap");
                },
              },
            },
            itemSize: 20,
            iconStyle: {
              normal: {
                borderColor: "#1990DA",
              },
              emphasis: {
                color: "#d5dfe8",
              },
            },
            top: 25,
            right: 15,
          },
          geo: {
            show: true,
            map: "china",
            roam: true,
            center: ["104.53531246", "33.5267395887"],
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .1)", // 100% 处的颜色
                    },
                  ],
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
              emphasis: {
                show: false,
                areaColor: "rgba(0,0,0,0)",
              },
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            zoom: 1.3,
          },
          series: [
            {
              name: "地图",
              type: "heatmap",
              data: data,
              coordinateSystem: "geo",
              pointSize: 13,
              blurSize: 15,
            },
          ],
        },

        true
      );
    };

    const sendMap = (val) => {
      context.emit("changeMap", val);
    };

    return {
      hotMap,
      myChart,
    };
  },
};
</script>
